<template>
  <div class="zut-web-history">
    <!-- 1. 轮播图 -->
    <header
        class="hero"
        :style="{ backgroundImage: `url(${heroImgs[heroIndex]})` }"
    >
      <div class="hero__dots">
        <span
            v-for="(_, i) in heroImgs"
            :key="i"
            :class="{ active: i === heroIndex }"
            @click="heroIndex = i"
        />
      </div>
    </header>
    <div class="bottom-bg">
      <img :src="backImg" alt="back" />
    </div>
    <!-- 2. 学校简介（已移到轮播图下方） -->
    <main class="main">

      <section class="overview-section">
        <h2 class="sec__title"><br>
        </h2>
        <h2 class="sec__title">学校简介</h2>
        <p class="sec__para">{{ school.brief }}</p>
      </section>

      <section class="sec sec--stats">
        <h2 class="sec__title">基本情况</h2>
        <div class="grid-cards">
          <div v-for="(v, k) in profile" :key="k" class="card">
            <h3 class="card__key">{{ k }}</h3>
            <p class="card__val">{{ v }}</p>
          </div>
        </div>
      </section>
      <!-- 学科建设等五个区块 -->
      <section class="sec sec--list">
        <!-- 学科建设 -->
        <section class="desc-block">
          <h2 class="sec__title">学科建设</h2>
          <div class="grid-cards">
            <div v-for="(v, k) in discipline" :key="k" class="card">
              <h3 class="card__key">{{ k }}</h3>
              <p class="card__val">{{ v }}</p>
            </div>
          </div>
        </section>

        <!-- 教育教学 -->
        <section class="desc-block">
          <h2 class="sec__title">教育教学</h2>
          <div class="grid-cards">
            <div v-for="(v, k) in education" :key="k" class="card">
              <h3 class="card__key">{{ k }}</h3>
              <p class="card__val">{{ v }}</p>
            </div>
          </div>
        </section>

        <!-- 科学研究 -->
        <section class="desc-block">
          <h2 class="sec__title">科学研究</h2>
          <div class="grid-cards">
            <div v-for="(v, k) in research" :key="k" class="card">
              <h3 class="card__key">{{ k }}</h3>
              <p class="card__val">{{ v }}</p>
            </div>
          </div>
        </section>

        <!-- 国际合作 -->
        <section class="desc-block">
          <h2 class="sec__title">国际合作</h2>
          <div class="grid-cards">
            <div v-for="(v, k) in international" :key="k" class="card">
              <h3 class="card__key">{{ k }}</h3>
              <p class="card__val">{{ v }}</p>
            </div>
          </div>
        </section>

        <!-- 发展目标 -->
        <section class="desc-block">
          <h2 class="sec__title">发展目标</h2>
          <div class="grid-cards">
            <div v-for="(v, k) in goals" :key="k" class="card">
              <h3 class="card__key">{{ k }}</h3>
              <p class="card__val">{{ v }}</p>
            </div>
          </div>
        </section>
      </section>
      <!-- 历史沿革 -->
      <section class="timeline-section">
        <h2 class="sec__title">历史沿革</h2>
        <div class="timeline-container">
          <!-- 时间轴导航 -->
          <div class="timeline-nav">
            <button
                class="nav-btn nav-prev"
                @click="navigateTimeline('prev')"
                :disabled="currentIndex === 0"
            >
              <el-icon><ArrowLeft /></el-icon>
            </button>

            <div class="timeline-line">
              <div
                  class="timeline-progress"
                  :style="{ width: progressWidth + '%' }"
              ></div>
              <div class="timeline-years">
                <div
                    v-for="(item, index) in timeline"
                    :key="index"
                    class="year-dot"
                    :class="{ active: index === currentIndex, visited: index < currentIndex }"
                    @click="jumpToPeriod(index)"
                    :style="{ left: getYearPosition(index) + '%' }"
                >
                  <span class="year-label">{{ getYearLabel(item.period) }}</span>
                </div>
              </div>
            </div>

            <button
                class="nav-btn nav-next"
                @click="navigateTimeline('next')"
                :disabled="currentIndex === timeline.length - 1"
            >
              <el-icon><ArrowRight /></el-icon>
            </button>
          </div>

          <!-- 内容展示区域 -->
          <transition name="fade-slide" mode="out-in">
            <div :key="currentIndex" class="timeline-content">
              <div class="period-header">
                <div class="period-badge">{{ currentPeriod.period }}</div>
                <h2 class="period-title">{{ currentPeriod.title }}</h2>
              </div>

              <div class="period-content">
                <p class="period-description">{{ currentPeriod.content }}</p>

                <div class="key-events">
                  <h3 class="events-title">重要事件</h3>
                  <div class="events-grid">
                    <div
                        v-for="(event, eventIndex) in currentPeriod.keyEvents"
                        :key="eventIndex"
                        class="event-card"
                    >
                      <div class="event-year">{{ event.year }}</div>
                      <div class="event-desc">{{ event.event }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
const backImg = new URL('@/assets/images/history/bg-pattern.jpg', import.meta.url).href

// 1. 引入本地图片
const heroImgs = [
  new URL('@/assets/images/history/20251031huet.jpg', import.meta.url).href,
  new URL('@/assets/images/history/szqujs.jpg', import.meta.url).href,
  new URL('@/assets/images/history/zut70.jpg', import.meta.url).href
]

const heroIndex = ref(0)
let heroTimer = null

const startHeroLoop = () => {
  heroTimer = setInterval(() => {
    heroIndex.value = (heroIndex.value + 1) % heroImgs.length
  }, 3000)
}

const stopHeroLoop = () => clearInterval(heroTimer)

onMounted(startHeroLoop)
onUnmounted(stopHeroLoop)
/* ---------------- 数据 ---------------- */
const school = ref({
  name: '中原工学院',
  founded: '1955',
  motto: '博学弘德，自强不息',
  brief:
      '中原工学院是一所以工为主，以电子信息、人工智能和织物电子为特色优势，多学科协调发展的河南省特色骨干学科建设高校。' +
      '学校始建于1955年，是原纺织工业部八所部属本科院校之一，1998年划转河南省管理，2000年更名为中原工学院，' +
      '2003年获批硕士学位授权单位，2018年获批河南省博士授予立项建设单位，2025年获批河南省博士学位授予重点立项建设单位。',
})

const profile = ref({
  教学院部: '设有 24 个教学院（部）',
  本科专业: '75 个本科专业',
  在校生: '全日制在校生 23145 人（本科生 20923 名，硕士研究生 2218 名）',
  教职工: '教职工 1829 人（专任教师 1349 人）',
  高层次人才:
      '高级职称教师 624 人，博士学位教师 715 人；院士、长江学者等高水平领军人才 9 人，国务院特殊津贴专家 8 人',
})

const discipline = ref({
  学位点: '17 个一级学科硕士学位授权点，21 个硕士专业学位授权类别',
  重点学科: '9 个学科获批新一轮河南省重点学科',
  学科群:
      '2 个学科群入选河南省特色骨干学科群，1 个学科群获批河南省特需急需特色骨干学科培育建设项目',
})

const education = ref({
  审核评估: '2024 年通过教育部本科教育教学审核评估',
  专业认证: '5 个专业通过工程教育专业认证（评估）',
  教学成果: '获省级教学成果奖特等奖 13 项，一等奖 32 项',
  一流课程: '国家级、省级一流本科课程 85 门，省级课程思政样板课 24 门',
})

const research = ref({
  科研平台: '40 个国家级和省部级科研平台',
  科研项目: '近五年承担各类科研项目 2 600 余项，年均入校科研经费超 1.25 亿元',
  科研成果:
      '获省（部）级以上科研成果奖 80 项，其中国家科技进步二等奖 2 项，国家技术发明二等奖 1 项',
  知识产权: '授权国家各类专利 946 项，发表高水平论文 1200 余篇',
  ESI排名: '工程学、材料科学、化学进入 ESI 世界前 1%',
})

const international = ref({
  合作概况:
      '河南最早开展中外合作办学项目的高校之一，全国首批 200 所具有接受外国留学生资格的高等院校之一',
  联合培养: '与英国曼彻斯特大学等国外著名高校签署联合培养博士、硕士项目',
  海外校区: '在泰国格乐大学设立海外分校——中原工学院轩辕学院',
  留学生: '招收 15 个"一带一路"沿线国家的优秀外国留学生',
})

const goals = ref({
  发展愿景: '建设成为国内先进、特色鲜明、具有一流学科的新型研究型工科大学',
  工作主线: '围绕河南电子科技大学申报设置和博士学位授权单位建设工作主线',
  指导思想: '贯彻落实"两高四着力"重要要求',
})

const timeline = [
  {
    period: '1955-1965',
    title: '创建与初步发展',
    content:
        '1955 年创建郑州纺织工业学校，是纺织工业部直属院校之一。建校初期仅有棉纺、毛纺、机织三个专业，首届招收学生 400 人。' +
        '1956 年首批校舍在郑州市建设路建成，1958 年升格为河南纺织工业学院，开始培养高等纺织工程技术人才。',
    keyEvents: [
      { year: '1955', event: '创建郑州纺织工业学校' },
      { year: '1956', event: '首批校舍建成' },
      { year: '1958', event: '升格为河南纺织工业学院' },
    ],
  },
  {
    period: '1966-1978',
    title: '艰难发展时期',
    content:
        '1966 年开始，学校经历了艰难的发展时期。1970 年学校下放郑州市管理，更名为郑州纺织工业学校。' +
        '尽管条件艰苦，学校仍然坚持办学，为纺织工业培养人才。1978 年，经国务院批准，学校恢复本科招生，迎来新的发展机遇。',
    keyEvents: [
      { year: '1970', event: '下放郑州市管理' },
      { year: '1978', event: '恢复本科招生' },
    ],
  },
  {
    period: '1979-2000',
    title: '恢复与发展',
    content:
        '1978 年恢复本科招生后，学校进入恢复发展期。1983 年划归纺织工业部直接管理，办学条件得到改善。' +
        '1985 年经国家教委批准，升格为郑州纺织工学院，正式成为本科院校。1997 年通过国家教委本科教学工作合格评价，办学水平得到认可。' +
        '2000 年经教育部批准，更名为中原工学院。',
    keyEvents: [
      { year: '1983', event: '划归纺织工业部' },
      { year: '1985', event: '升格为郑州纺织工学院' },
      { year: '1997', event: '通过本科教学合格评价' },
      { year: '2000', event: '更名为中原工学院' },
    ],
  },
  {
    period: '2000 至今',
    title: '快速发展时期',
    content:
        '2000 年更名为中原工学院后，学校进入快速发展期。2003 年获批硕士学位授予单位，2018 年获批河南省博士学位授予立项建设单位，' +
        '2025 年获批河南省博士学位授予重点立项建设单位。学校现已发展成为一所以工为主，多学科协调发展的省属本科院校。',
    keyEvents: [
      { year: '2003', event: '获得硕士学位授予权' },
      { year: '2018', event: '获批博士授予立项建设单位' },
      { year: '2025', event: '获批博士学位授予重点立项建设单位' },
    ],
  },
]

/* ---------------- 时间轴相关 ---------------- */
const currentIndex = ref(0)
let autoplayInterval = null

const currentPeriod = computed(() => timeline[currentIndex.value])
const progressWidth = computed(() => ((currentIndex.value + 1) / timeline.length) * 100)

const getYearLabel = (period) => (period.split('-')[0] || period)
const getYearPosition = (index) => (index / (timeline.length - 1)) * 100

const navigateTimeline = (direction) => {
  if (direction === 'prev' && currentIndex.value > 0) currentIndex.value--
  else if (direction === 'next' && currentIndex.value < timeline.length - 1) currentIndex.value++
}
const jumpToPeriod = (index) => (currentIndex.value = index)

const startAutoplay = () => {
  autoplayInterval = setInterval(() => {
    currentIndex.value = currentIndex.value < timeline.length - 1 ? currentIndex.value + 1 : 0
  }, 4000)
}
const stopAutoplay = () => {
  if (autoplayInterval) clearInterval(autoplayInterval), autoplayInterval = null
}

const handleKeydown = (e) => {
  if (e.key === 'ArrowLeft') navigateTimeline('prev')
  else if (e.key === 'ArrowRight') navigateTimeline('next')
}

onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
  startAutoplay()
})
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
  stopAutoplay()
})
</script>
<style scoped>
/* ---------- 顶部大图 ---------- */
.hero {
  height: 60vh;
  min-height: 400px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: background-image 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
/* 指示点 */
.hero__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.3s;
}
.hero__dots span.active {
  background: #409eff;
}
/* ---------- 主体 ---------- */
.bottom-bg {
  position: relative;        /* 让img绝对定位参照 */
  width: 100%;
  height: 0;                 /* 不占高度，纯背景 */
  overflow: hidden;
}
.bottom-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;                /* 最底层 */
}

/* 内容区上浮盖住底图 */
.main {
  position: relative;
  z-index: 1;                /* 高于底图 */
  background: rgba(255,255,255,.92); /* 可选：蒙一层半透明白，让文字更清晰 */
  padding: 40px 20px;
}
.tabs {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  padding: 24px;
}
.sec { margin-bottom: 48px; }
.sec__title { margin-bottom: 16px; color: #303133; }
.sec__para { line-height: 1.8; color: #555; }

/* ---------- grid 卡片 ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
}
.card:hover { transform: translateY(-4px); }
.card__key { margin: 0 0 8px; color: #409eff; font-size: 16px; }
.card__val { margin: 0; color: #555; }

/* ---------- 时间轴 ---------- */
.timeline-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.timeline-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}
.nav-btn {
  width: 50px; height: 50px; border-radius: 50%; border: 2px solid #409eff;
  background: #fff; color: #409eff; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .3s ease;
}
.nav-btn:hover:not(:disabled) { background: #409eff; color: #fff; transform: scale(1.1); }
.nav-btn:disabled { opacity: .5; cursor: not-allowed; }
.timeline-line {
  flex: 1; height: 6px; background: #e4e7ed; border-radius: 3px; position: relative;
}
.timeline-progress {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  border-radius: 3px; transition: width .5s ease;
}
.timeline-years { position: absolute; top: -8px; left: 0; right: 0; height: 22px; }
.year-dot {
  position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid #e4e7ed; cursor: pointer; transition: all .3s ease;
  display: flex; align-items: center; justify-content: center;
}
.year-dot:hover { transform: scale(1.2); border-color: #409eff; }
.year-dot.active { border-color: #409eff; background: #409eff; transform: scale(1.3); }
.year-dot.visited { border-color: #67c23a; background: #67c23a; }
.year-label { position: absolute; top: -30px; font-size: 12px; color: #606266; white-space: nowrap; transform: translateX(-50%); }

.timeline-content {
  background: #fff; border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,.1); min-height: 400px;
}
.period-header { text-align: center; margin-bottom: 40px; }
.period-badge {
  display: inline-block; background: linear-gradient(135deg, #409eff, #67c23a);
  color: #fff; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: bold; margin-bottom: 15px;
}
.period-title { font-size: 2.5rem; color: #303133; margin: 0; }
.period-description { font-size: 1.1rem; line-height: 1.8; color: #606266; margin-bottom: 40px; text-align: justify; }
.events-title { font-size: 1.5rem; color: #303133; margin-bottom: 20px; text-align: center; }
.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.event-card {
  background: linear-gradient(135deg, #f0f9ff, #e6f7ff); border-radius: 10px;
  padding: 20px; text-align: center; transition: all .3s ease; border: 2px solid transparent;
}
.event-card:hover { transform: translateY(-5px); border-color: #409eff; box-shadow: 0 8px 25px rgba(64,158,255,.2); }
.event-year { font-size: 1.5rem; font-weight: bold; color: #409eff; margin-bottom: 10px; }
.event-desc { color: #606266; line-height: 1.6; }

.timeline-controls { text-align: center; margin-top: 30px; }
.play-btn {
  background: linear-gradient(135deg, #409eff, #67c23a); color: #fff; border: none;
  padding: 12px 24px; border-radius: 25px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; font-size: 14px; transition: all .3s ease;
}
.play-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(64,158,255,.3); }

/* 过渡动画 */
.fade-slide-enter-active, .fade-slide-leave-active { transition: all .5s ease; }
.fade-slide-enter-from { opacity: 0; transform: translateX(30px); }
.fade-slide-leave-to { opacity: 0; transform: translateX(-30px); }

/* 响应式 */
@media (max-width: 768px) {
  .timeline-nav { gap: 10px; }
  .nav-btn { width: 40px; height: 40px; }
  .timeline-content { padding: 20px; }
  .period-title { font-size: 2rem; }
  .events-grid { grid-template-columns: 1fr; }
}
</style>
